<template>
  <el-col :span="12">
    <el-menu class="el-menu-vertical-demo">
        <h3>{{'管理端'}}</h3>
        <el-menu-item @click="clickMenu(item)" v-for="item in noChildren" :index="item.path" :key="item.path">
            <template slot="title">
            <i :class="'el-icon-'+item.icon"></i>
            <span slot="title" >{{ item.label }}</span>
            </template>
        </el-menu-item>
    </el-menu>
  </el-col>
</template>

<style lang='less' scoped>
.el-menu-vertical-demo:not(.el-menu--collapse) {
    width: 240px;
    // min-height: 100%;
}
  .el-menu{
      min-height: 400px;
      width: 240px;
      h3 {
        color: #000;
        text-align:center;
        font-size:24px;
      };
  }
</style>

<script>
  export default {
    name:'CommonAside',
    data() {
      return {
        menu:[
            {
                path:'/',
                name:'home',
                label:'首页',
                icon:'s-home',
                url:'Home/Home'
            },
            {
                path:'/users',
                name:'users',
                label:'账户管理',
                icon:'user',
                url:'users/users'
            },
            {
                path:'/importCT',
                name:'importCT',
                label:'图谱导入（CT）',
                icon:'upload',
                url:'importCT/importCT'
            },
            {
                path:'/importMRI',
                name:'importMRI',
                label:'图谱导入（MRI）',
                icon:'upload',
                url:'importMRI/importMRI'
            },
        ]
      };
    },
    methods: {
      clickMenu(item) {
        this.$router.push({
            name:item.name
        })
        // this.$store.commit("selectMenu", item);
      }
    },
    computed:{
        noChildren(){
            return this.menu.filter(item =>!item.children)
        }, 
        hasChildren(){
            return this.menu.filter(item =>item.children)
        },

    }
  }
</script>